<!DOCTYPE html>
<html>
<head><title>Js实现图片滤镜特效</title>
<style>
.30PT{font-size:30pt;font-family:微软雅黑;color:#0099CC}
</style>
<script>
var colors=new Array("red", "#2994fd", "#11fff2", "#c0b189", "#f2fd89", "magenta", "white");
function rainbow() 
{
	var el = document.all.racerX;
	if (null==el.color) el.color = 0;
	if (++el.color==colors.length) el.color=0;
	el.style.color = colors[el.color];
	window.tm=setTimeout('rainbow()',750);        
}        
</script>
</head>
<body onload="rainbow()">
<div style="position:absolute; top:0, left:0; width:400; height:300; z-index:0">
<IMG src="http://www.CsrCode.cn/images/m01.jpg" width=400 height=300></div>
<div style="position:absolute; top:200; left:190; width:200; height:100; text-align:center; z-index:2">
<IMG id=logo src="http://www.codefans.net/jscss/demoimg/201307/race.gif" style="filter:mask(color=red);"></div>
<div style="position: absolute;color: white; top: 200; left:190; width:200; height:100; z-index:1">
<span id=racerX style="font-size:8pt; line-height:8px; font-family=Arial; font-weight:bold; z-index:1"> 
<pre>racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
</pre></span></div>
</body>
</html>
